<template>
  <div>
    <div class="goods-page commodity-theme">
      <div class="iconfont icon page-left page-div hand-class" @click="pageAddOrSub(0)">&#xe736;</div>
      <div v-for="item of showPageList" class="page-div hand-class" @click="pageClick(item)"
           :class="{'contry-select-colo':parseInt(showSize)===parseInt(item)}">{{item}}
      </div>
      <div class="iconfont hand-class icon page-right page-div" @click="pageAddOrSub(1)">&#xe735;</div>
      <div class="page-div  ">
        <input type="text" class="page-jump" @keyup.enter="pageClick(jumpPage)" placeholder="输入"
               v-model="jumpPage"/>
      </div>

      <div class="page-div page-div-go" style="width: 8%;background: #0ef4ff">
        <button class="jump-go hand-class" @click="pageClick(jumpPage)">跳转</button>
      </div>
      <div class="page-div" style="width: 10%;font-size: 15px">共{{allPage}}页</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "page",
    data() {
      return {
        allPage: 100,//总共页数
        jumpPage: null,//跳转页数
        showSize: 2,//初始化显示
        showPageList: [1, 2, 3, 4, 5, 6, 7, 8],
      }
    },
    props:{
      allPageS: Number,//总共页数
      jumpPageS: Number,//跳转页数
      showSizeS: Number,//初始化显示
      showPageListS: Array,
    },
    methods: {
      /**
       * 0左箭头，1右箭头
       * @param type
       */
      pageAddOrSub(type) {

        if (type === 0) {
          if (this.showSize === 1) {
            alert("已是最小页数")
            return
          }
          if (this.showSize - 1 !== 1) {


            this.showPageList = [
              this.showSize - 1,
              this.showSize - 2,
              this.showSize - 3,
              this.showSize - 4,
              this.showSize - 5,
              this.showSize - 6,
              this.showSize - 7,
              this.showSize - 8,
            ]
          }
          this.showSize = this.showSize - 1
        } else {
          if (this.showSize === this.allPage) {
            alert("已是最大页数")
            return
          }
          if (this.showSize + 1 !== 100) {


            this.showPageList = [
              this.showSize + 1,
              this.showSize + 2,
              this.showSize + 3,
              this.showSize + 4,
              this.showSize + 5,
              this.showSize + 6,
              this.showSize + 7,
              this.showSize + 8,
            ]
          }
          this.showSize = this.showSize + 1

        }

      },
      /**
       *  点击页数
       * @param page
       */
      pageClick(page) {

        let numTure = page.toString().replace(/[^\d]/g, "");
        console.log(numTure)
        page = parseInt(page)
        if (page !== null && numTure && page >= 1 && page <= this.allPage) {
          this.showSize = page
          this.showPageList = [
            this.showSize ,
            this.showSize + 1,
            this.showSize + 2,
            this.showSize + 3,
            this.showSize + 4,
            this.showSize + 5,
            this.showSize + 6,
            this.showSize + 7,
          ]


        } else {

          alert("非法参数")
        }
      }
    },
    created(){
      this.allPage=this.allPageS
      this.jumpPage=this.jumpPageS
      this.showSize=this.showSizeS
      this.showPageList=this.showPageListS
    }
  }
</script>

<style scoped>

  .goods-page {

    width: 50%;
    height: 40px;
    margin: 1% 24.5%;
    border: solid 2px #ffed3e

  }

  .commodity-theme {
    float: left;
  }

  .page-div-go {
    width: 25px;
    border: 1px solid red;
  }

  .contry-select-colo {
    background: yellow;
  }

  .page-div {
    float: left;
    border: solid 1px wheat;
    border-radius: 1px;
    font-size: 17px;
    line-height: 35px;
    width: 5%;
    height: 80%;
    margin: 3px 0.8%;

    text-align: center;
  }

  .page-jump {
    width: 100%;
    height: 100%;
    text-align: center;
    border: #b6b6b6;
    font-size: 13px;
    font-family: 微软雅黑;
  }

  .jump-go {
    line-height: 0px;
    font-size: 15px;
    background: #007aff;
    font-weight: bold;
    color: #007aff;
  }

</style>
